<template>
  <el-dialog
    v-model="isShow"
    :title="handle.name + name"
    width="800"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-form class="dialog-form" label-width="100px">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12">
          <el-form-item label="公会：" required>
            <el-select v-model="form.guildId" placeholder="请选择" clearable style="width:100%" @change="changeGuild">
              <el-option v-for="(item,index) in optionData.guildList" :key="index" :label="item.guildName" :value="item.guildId" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="用户：">
            <el-select v-model="form.userId" placeholder="请选择" clearable style="width:100%">
              <el-option v-for="(item,index) in userList" :key="index" :label="item.name" :value="item.userId" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="天数：">
            <el-input v-model="form.days" type="number" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="最终有效期：">
            <el-date-picker v-model="form.finalValidity" type="date" placeholder="请选择" value-format="YYYY-MM-DD" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12">
          <el-form-item label="总次数：">
            <el-input v-model="form.remainingQuantity" type="number" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <!-- <el-col :xs="24" :sm="12">
          <el-form-item label="状态：">
            <el-radio-group v-model="form.status">
              <el-radio v-for="(item,index) in optionData.invitationStatus" :key="index" :label="item.id">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col> -->
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="toSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ElMessage, ElMessageBox} from 'element-plus'
import { ref, reactive, getCurrentInstance, nextTick } from 'vue';
import { useAddEdit } from '/@/assets/compositionFn/addEdit';
const obj = {
  api: '/admin/guildInvitation',
  initForm:{
    invitationId: null,
    guildId: null,
    userId: null,
    days: null,
    remainingQuantity: null,
    finalValidity: null,
    status: '0',
  },
};
const userName = ref();
let {isShow, btnLoading, handle, optionData, form, init, returnInfo, handleClose, submitForm} = useAddEdit(obj);
const emit = defineEmits(['confirm']);
const {proxy} :any = getCurrentInstance();
const prop = defineProps({
  name: {
    type: String,
  }
});
watch(isShow,(newVal, oldVal) => {
  if(newVal){
    //弹窗后的其他操作
    let info = returnInfo();
    if(handle.type == 'edit'){
      changeGuild(info.guildId);
    }
  }else{
    userList.value = [];
  }
});
let userList = ref([]);
const changeGuild = (val) => {
  // proxy.$request('get', '/admin/userGuilds/page', {guildId: val,current:1,size:1000}, (data,msg) => {
  //   userList.value = proxy.$util.transformArray(data.records, 'userId', 'username');
  // });
  form.userId = null;
  proxy.$request('get', '/admin/userGuilds/getGuildsMemberInfo/' + val, {}, (data,msg) => {
    let arr = data.map(item => item.appUserListVo);
    userList.value = proxy.$util.transformArray(arr, 'userId', 'username');
  })
}
const verifyForm = ()=>{
  if(!proxy.$verify.null(form.guildName, '请填写卡名称')){
    return false;
  }
  if(!proxy.$verify.null(form.guildId, '请选择公会')){
    return false;
  }
  // if(!proxy.$verify.null(form.userId, '请选择用户')){
  //   return false;
  // }
  if(!proxy.$verify.null(form.days, '请填写天数')){
    return false;
  }
  if(!proxy.$verify.null(form.finalValidity, '请选择最终有效期')){
    return false;
  }
  if(!proxy.$verify.null(form.remainingQuantity, '请填写总次数')){
    return false;
  }
  return true;
};
const toSubmit = ()=>{
  if(!verifyForm()){
    return;
  }
  submitForm().then(res => {
    emit('confirm');
  });
  
}
defineExpose({
  init,
})
</script>

<style>

</style>